<style scoped>

</style>
<template>
    <div id="page-charge-record" class="page-user page-wrap page-charge-record">
        <div class="m-user">
            <header-component :page-name="pageName">
                <a href="javascript:;" class="m-simpleHeader-ok" data-href="?c=recharge" v-link="{path:'/charge'}">充值</a>
            </header-component>

            <div class="m-user-chargeRecord">

                <div class="remark" v-if="item">
                    <p class="item">目前仅提供最近三个月的消费记录。</p>
                </div>

                <div class="list" id="chargeRecordList">

                <div class="item" v-for="(k,i) in item">
                    <p class="from">{{i.paytype}}</p>
                    <p class="time">时间:{{i.paytime}}</p>
                    <p class="num">&yen;{{i.amount}}</p>
                </div>

                </div>
                <div class="w-more" id="chargeRecordMore" v-el:charge-record-more>
                    <template v-if="hasMore">
                        <b class="ico ico-loading"></b>努力加载中
                    </template>
                    <template v-if="!hasMore&&!!item">
                        沒有更多了
                    </template>
                    <template v-if="!hasMore&&!item">
                        暂无消费记录
                    </template>
                </div>
            </div>
        </div>
    </div>

</template>
<script>
    import headerComponent from '../components/header'
    import User from '../module/user'
    module.exports = {
        data() {
            return {
                item:[],
                pageName:'消费记录',
                page:0,
                hasMore: true,
                loading: false,
            }
        },
        components: {
            headerComponent
        },
        created(){
            this.$dispatch('isLoading', true);
        },
        async ready() {
            if(!User.isLogin){
                history.replaceState({"num":1},"",'/home');
                this.$router.go('/login');
            }else{
                this.loading= true;
                let res = await User.getUserPayOrder(this.page);
                this.loading = false;
                if(res.status == 200 && !!res.data && !!res.data.item){
                    this.item.push(...res.data.item);
                    this.page++;
                }else{
                    this.hasMore=false;
                }


            }
            this.$dispatch('isLoading', false);
            document.addEventListener('scroll',this.getMore,false)
        },
        beforeDestroy() {
            document.removeEventListener('scroll',this.getMore,false)
        },
        methods: {
            async loadMore(){
                if (this.loading) {
                    return;
                }
                this.loading = true;
                let res = await User.getUserPayOrder(this.page);
                if(res.status == 200 && !!res.data && res.data.item && res.data.item.length > 0) {
                    this.page++;
                    this.item.push(...res.data.item);

                }else{
                    this.hasMore=false;
                }
                this.loading=false;
            },
            getMore(){
                let pos = this.$els.chargeRecordMore.getBoundingClientRect();
                if (this.hasMore &&
                        ((pos.top > 0 && window.innerHeight - pos.top > 0) ||
                        (pos.top <= 0 && pos.bottom >= 0))) {
                    this.loadMore();
                }
            }
        }
    }
</script>
